<template>
  <div class="layout">
    <Layout :style="{minHeight: '100vh', background: '#fff'}">
      <Sider :collapsed-width="78" v-model="isCollapsed" class="nl-left" :style="{position: 'fixed', height: '100vh', left: 0, overflow: 'auto'}">
        <!-- 导航菜单组件 theme 可以选择主题 accordion 可以开启手风琴模式，每次只能展开一个子菜单 -->
        <Menu
          :active-name="$route.name"
          theme="dark"
          width="auto"
          :class="menuitemClasses"
          accordion
          @on-select="test"
        >
          <Row type="flex" align="middle" class="nl-logoname">
            <Col span="8" push="2">LOGO</Col>
            <Col span="14">
              <Row type="flex" justify="center" class="nl_name">
                <Col span="18">一站式</Col>
              </Row>
              <Row type="flex" justify="center" class="nl_name">
                <Col span="18">综合管理平台</Col>
              </Row>
            </Col>
          </Row>
          
          <div v-for="(item,i) in  vueRouters" :key="i">
              <Submenu :name="item.name" v-if="item.meta.display!='false'">
                    <template slot="title">
                      <Icon :type="item.meta.icon" />
                      <span>{{item.meta.title}}</span>
                    </template>
                  <div v-if="item.children">
                    <div v-for="(itemChildren,j) in item.children" :key="j">
                      <MenuItem :name="itemChildren.name" v-if="itemChildren.meta.display!='false'">
                        <Icon type="ios-list-box-outline" />
                        <span>{{itemChildren.meta.title}}</span>
                      </MenuItem>
                    </div>
                  </div>
              </Submenu>
          </div>
        </Menu>
      </Sider>
      <Layout :style="{marginLeft:'200px'}">
        <!-- 用户信息 -->
        <Row type="flex" justify="end" align="middle" class="nl-user">
          <Col span="1">
            <Row type="flex" justify="end">
              <Col span="15">
                <Avatar icon="ios-person" />
              </Col>
            </Row>
          </Col>
          <Col span="2">
            <Row>
              <Col span="19">小美呀，欢迎您！</Col>
              <Col span="1">
                <!-- 下拉菜单组件，trigger是设置触发方式 -->
                <Dropdown trigger="click">
                  <a href="javascript:void(0)">
                    <Icon type="ios-arrow-down"></Icon>
                  </a>
                  <DropdownMenu slot="list">
                    <DropdownItem>个人中心</DropdownItem>
                    <DropdownItem>退出</DropdownItem>
                  </DropdownMenu>
                </Dropdown>
              </Col>
            </Row>
          </Col>
          <Col span="1"></Col>
        </Row>
        <Content :style="{padding: '0 16px 16px'}">
          <Breadcrumb :style="{margin: '16px 0'}">
            <!-- <BreadcrumbItem>新闻管理</BreadcrumbItem>
            <BreadcrumbItem>新闻审核</BreadcrumbItem>-->
            <!-- 面包屑路由导航 -->
            <BreadcrumbItem
              :to="path(index)"
              v-for="(item, index) in $route.meta.name"
              :key="index"
            >{{item}}</BreadcrumbItem>
          </Breadcrumb>
          <!-- 折叠面板组件 -->
          <div class="main_content">
            <router-view />
            </Row>
          </div>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>
<style scoped>
.layout-con {
  height: 100%;
  width: 100%;
}
.menu-item span {
  display: inline-block;
  overflow: hidden;
  width: 69px;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width 0.2s ease 0.2s;
}
.menu-item i {
  transform: translateX(0px);
  transition: font-size 0.2s ease, transform 0.2s ease;
  vertical-align: middle;
  font-size: 16px;
}
.collapsed-menu span {
  width: 0px;
  transition: width 0.2s ease;
}
.collapsed-menu i {
  transform: translateX(5px);
  transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
  vertical-align: middle;
  font-size: 22px;
}
.nl_name {
  color: #ffffff;
}
.nl_name:nth-child(1) {
  margin-top: 0.5rem;
}
.send-news {
  margin-bottom: 10px;
}
.nl-user {
  background: white;
  box-shadow: 0 0 10px #dcdee2;
  height: 50px;
}
.nl-square {
  width: 3px;
  height: 13px;
  background: #3431ec;
}
/* .ivu-menu-dark {
  background: #191952;
} */
.nl-left {
  background: #191952;
}
/* .ivu-menu-submenu:hover {
  background: #3b3994;
}
.ivu-menu-item{
  background: #0c0c35 !important;
}
.ivu-menu-item:hover{
  background: #0d0d3d !important;
}
/* 选中时的样式 */
/*.ivu-menu-dark.ivu-menu-vertical .ivu-menu-opened .ivu-menu-submenu-title{
  background: #191952 !important;
}  */
.nl-page {
  margin-top: 10px;
}
.nl-logoname {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.nl-newsCuration-row {
  margin-bottom: 10px;
}
/* 旋转 */
.aa {
  transition: all 0.2s;
  transform-origin: 50% 45%;
}
.go {
  transform: rotate(-180deg);
  transition: all 0.2s;
  transform-origin: 50% 45%;
}
</style>
<script> 
export default {

  data() {
    return {
      isCollapsed: false,
      nowData: [],
      vueRouters:[],
    };
  },
  created() {
    // console.log(this.$router)
    this.vueRouters=this.$router.options.routes
  },
  methods: {
    test(name) {
      // console.log(name);
      this.$router.push({ name: name });
    },
    // 菜单打开
    handleOpen() {
      this.visible = true;
    },
    //菜单关闭
    handleClose() {
      this.visible = false;
    }
  },
  computed: {
    menuitemClasses: function() {
      return ["menu-item", this.isCollapsed ? "collapsed-menu" : ""];
    },
    // 路由导航的方法，用来得到名称所对应的路由赋值给面包屑的to属性。
    path() {
      return function(index) {
        return this.$route.meta.path[index];
      };
    }
  }
};
</script>

